<template>
  <div class="chat-main">
    <n-flex vertical>
      <v-infinite-scroll
        id="msg-infinite-scroll"
        height="860"
        side="start"
        @load="load">
        <SingleMessageItem
          v-for="(item, index) in items"
          :key="item.id"
          :message="item"
          :previousMessage="items[index - 1] || null" />
        <template v-slot:empty>开始的地方...</template>
      </v-infinite-scroll>
    </n-flex>
  </div>
</template>

<script setup lang="ts">
import { nextTick, onMounted, ref } from "vue";
import SingleMessageItem from "@/components/message-window/SingleMessageItem.vue";
import { ChatMessage, PrivateChatMessageServices } from "@/api";
import emitter from "@/plugins/emitter.ts";
import wsSocket from "@/plugins/ws-socket.ts";

const items = ref<ChatMessage[]>([]);

let element: HTMLElement | null = null;

const props = defineProps<{ privateId: number }>();

async function load({
  done,
}: {
  done: (status: "ok" | "empty" | "loading" | "error") => void;
}) {
  const result = await PrivateChatMessageServices.getHistoricalMessages({
    messageId: items.value[0]?.id,
    targetId: props.privateId,
    limit: 10,
  });
  if (result.data != undefined) {
    let data = result.data as unknown as ChatMessage[];
    if (data.length == 0) {
      done("empty");
      return;
    }
    items.value.unshift(...data.reverse());
    done("ok");
  }
}

async function addMessage(message: ChatMessage) {
  items.value.push(message);
  if (element) {
    if (element.scrollTop >= element.scrollHeight - element.offsetHeight - 20) {
      await nextTick(); // 等待 DOM 更新完成
      element.scrollTo({
        top: element.scrollHeight,
        behavior: "smooth",
      });
    }
  }
}

wsSocket.receive("messageDisplayProcessing", (data) => {
  if (data.code < 200) {
    const message = data.data as ChatMessage;
    if (data.code === 120) {
      // 发送消息成功
      addMessage(message);
    } else if (data.code === 121) {
      if (message.targetId === props.privateId) {
        // 接收在线消息成功
        addMessage(message);
      } else {
        // TODO 提示非当前窗口消息
      }
    }
    // TODO 同步消息
    console.log(data.message);
  } else {
    console.warn(data.message);
  }
});

onMounted(() => {
  element = document.getElementById("msg-infinite-scroll");
});
</script>
<style scoped>
.chat-main {
  width: 100%;
  flex: 1;
}

.n-list {
  background-color: transparent !important;
}

.n-list-item {
  margin: 0 20px;
}

.item {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 0;
}

.item:last-child {
  margin-bottom: 0;
}

/* 初始滚动条 */
.v-infinite-scroll::-webkit-scrollbar {
  width: 0;
}

/* 滚动条鼠标悬停时 */
.v-infinite-scroll:hover::-webkit-scrollbar {
  width: 8px;
}

/*滚动条轨道*/
.v-infinite-scroll::-webkit-scrollbar-track {
  background: rgb(239, 239, 239);
  border-radius: 2px;
}

/*小滑块*/
.v-infinite-scroll::-webkit-scrollbar-thumb {
  background: #cccccc;
  border-radius: 10px;
}

.v-infinite-scroll::-webkit-scrollbar-thumb:hover {
  background: #999999;
}
</style>
